<template>
  <div class="Student">
    <Management>
      <Top
        slot="top"
        @showModel="showModel"
        @showAll="showAll"
        @search="onSearch"
      ></Top>
      <Table
        slot="body"
        :title="columns"
        :tableData="tableData"
        :operationWidth="200"
        :total="total"
        otherTxt="重置密码"
        :current="current"
        @edit="edit"
        @other="other"
        @del="del"
        @changePage="changePage"
      ></Table>
    </Management>
    <Dialog
      v-if="isShow"
      :show="isShow"
      :row="row"
      @confirm="confirm"
      @cancel="cancel"
    ></Dialog>
  </div>
</template>

<script>
import Table from "components/common/table/Table";
import Management from "components/common/management/Management";
import Top from "./component/Top";
import Dialog from "./component/Dialog";
import { Modal } from "ant-design-vue";
import {
  getDataByPageAndSize,
  appendData,
  deleteById,
  editData,
  searchById,
  initPassword,
} from "network/u-student";

export default {
  components: {
    Table,
    Top,
    Management,
    Dialog,
  },
  data() {
    const columns = [
      {
        title: "学号",
        dataIndex: "id",
      },
      {
        title: "姓名",
        dataIndex: "name",
      },
      {
        title: "电话",
        dataIndex: "phone",
      },
      {
        title: "专业",
        dataIndex: "subjectName",
      },
    ];
    return {
      tableData: [],
      columns,
      isShow: false,
      total: 0,
      current: 1,
    };
  },
  created() {
    this.init();
  },
  methods: {
    /**
     * @description: 初始化页面
     * @param {Number} page
     * @param {Number} size
     * @author: tao
     */
    async init(page = 1, size = 10) {
      const result = await getDataByPageAndSize(page, size);
      if (result.msg) {
        this.tableData = result.data.map((item) => {
          return item;
        });
        this.current = page;
        this.total = result.count;
      }
    },

    async del(e) {
      const result = await deleteById(e.id);
      if (result.msg) {
        this.init();
      }
    },

    // 添加 或 编辑 弹窗的确定按钮
    async confirm(data) {
      this.closeDialog();

      const result = await this.confirmAjax(data);
      if (result.msg) {
        this.init();
      }
    },

    //发起添加 或 编辑 的请求
    async confirmAjax(data) {
      let edit = data.edit;
      this.$delete(data, "subjectName");
      this.$delete(data, "edit");

      if (edit) return editData(data);
      return appendData(data);
    },

    async onSearch(name, page = 1, size = 10) {
      const result = await searchById({
        name,
        page,
        size,
      });
      if (!result.msg) return;
      this.tableData = result.data.slice();
    },

    async other(e) {
      Modal.confirm({
        title: "提示",
        content: "你确定重置密码吗",
        okText: "确认",
        cancelText: "取消",
        onOk: async () => {
          await initPassword(e.id);
        },
      });
    },

    changePage(page) {
      this.init(page);
    },

    showAll() {
      this.init();
    },

    showModel() {
      this.isShow = true;
      this.row = {};
    },

    edit(e) {
      this.isShow = true;
      this.row = { ...e, edit: true };
    },

    cancel() {
      this.closeDialog();
    },

    closeDialog() {
      this.isShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
.Student {
  height: 100%;
  display: flex;
  flex-direction: column;
  .StudentTable {
    flex: 1;
  }
}
</style>
